<!--
 * @Author: Gabriel 1599130621@qq.com
 * @Date: 2022-10-08 10:34:33
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2022-10-26 17:21:42
 * @FilePath: \nonogram\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import Header from "./pages/Header.vue";
import Center from "./pages/Center.vue";
import Footer from "./pages/Footer.vue";
import { onMounted, onUnmounted, ref } from "vue";
const view = ref(0);
const font = ref(0);
let obs: ResizeObserver;
onMounted(() => {
  const IsPhone = /mobile/i.test(navigator.userAgent);
  const screen = IsPhone ? window.innerWidth : window.innerHeight;
  view.value = screen - 325;
  const min = IsPhone ? window.innerWidth - 10 : 500;
  function setView() {
    view.value = view.value < min ? min : view.value;
    font.value =
      Math.sqrt(
        Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2)
      ) / 19;
      // console.log(view.value);
      
  }
  setView();
  obs = new ResizeObserver(() => setView);
  obs.observe(document.body);
});
onUnmounted(() => {
  obs.disconnect();
});
</script>

<template>
  <div id="app-box" v-if="view">
    <Header />
    <Center :view="view" />
    <Footer />
    <div class="BgColor" :style="{ height: `${view + 125}px` }">
    </div>
    <div class="BgWColor" :style="{ top: `${view + 125}px` }"></div>
  </div>
</template>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  /* opacity: 0; */
  /* width: 100%; */
}
.BgColor {
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 756px;
  background-color: rgb(234, 230, 205);
  background-position-y: 3px;
  overflow: hidden;
  font-size: 99px;
  color: rgb(0, 0, 0);
  font-family: initial;
  background-image: url(./assets/img/bg.png);
  background-position-x: -45px;
}

/* .BgColor::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(./assets/img/bg.png);
  background-position-x: -45px;
} */

.BgWColor {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: white;
}

#app {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgb(234, 230, 205); */
}
#app-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 100%; */
}
* {
  padding: 0;
  margin: 0;
  font-family: fontFamilyName;
}

@font-face {
  font-family: "fontFamilyName";
  src: url("./assets//font/ZCOOLKuaiLe-Regular.ttf");
}
</style>
